<template>
	<view class="xiding">
		<view class="search_box">
			<image src="../../static/s1.png" class="goback" @click="gobackClick" mode="widthFix"></image>
			<view class="topicText" style="padding-left: 100rpx;">{{prayList.title}}</view>
			<view class="" style="color: #FFFFFF;" @click="openxiaofei" v-show="Records">祈愿记录</view>
			<view class="" style="color: #FFFFFF;" @click="opendonation" v-show="donation">捐赠记录</view>
		</view>
		<view class="interval">
			<!-- 内容 -->
			<view class="content">
				<image :src="'https://www.123qifu.com/'+prayList.image" style="width: 350rpx;padding-bottom: 300rpx;"
				 mode="widthFix" ></image>
				<!-- 捐赠 -->
				<view class="worship_text" v-show="worShow">
					<text>{{prayList.title}}</text>
					<view class="textNum" style="margin-top: 10rpx;">
						已有捐赠：
						<text class="amount">{{prayList.donation_amount}}</text>
					</view>
				</view>
				<!-- 捐赠金额 -->
				<view class="money" v-show="worShow">
					<text>金额：</text>
					<input type="text" value="" class="moneyInp" v-model="moneyText" />
				</view>
				<!-- 捐赠按钮 -->
				<view class="worBtn" @click="boxClick(prayList.id)" v-show="donate">捐赠</view>
				<!-- 捐赠成功的图 -->
				<image src="../../static/box.png" class="boxImg" mode="widthFix" v-if="flags"></image>
				<text class="boxText" v-if="showTap">您已成功捐赠</text>
				<!-- 拜佛 -->
				<!-- <view class="wish" v-show="showLight">
					<view class="wish_one" v-for="(wish,index) in wishList" @click="wishClcik(index)" :key="index">
						<image :src="wish.imgUrl" style="width: 96rpx;margin-bottom: 15rpx;" mode="widthFix"></image>
						<text>{{wish.text}}</text>
					</view>
				</view> -->
				<!-- 拜佛弹窗 -->
				<view class="popup" v-if="flag">
					<view class="popText">
						<text>祭拜{{prayList.title}}菩萨需要</text>
						<text style="color: #C52B2E;padding-left: 10rpx;font-weight: 600;">6.66元</text>
					</view>
					<text style="padding: 20rpx 0;">您是否愿意？</text>
					<view class="popBtn">
						<text class="cancel" @click="showClcik">取消</text>
						<text class="cancel" style="border: 0;color: #333333;">愿意</text>
					</view>
				</view>
				<!-- 取消拜佛弹窗 -->
				<view class="abolish" v-show="show">您已取消祭拜{{prayList.title}}菩萨</view>
				<!-- 点击贡品 -->
				<!-- <view class="tribute" v-show="showTribute">
					<image src="../../static/r1.png" style="width: 120rpx;margin-top: 170rpx;" mode="widthFix" v-show="showOne"></image>
					<image src="../../static/r1.png" style="width: 120rpx;margin-top: 170rpx;" mode="widthFix" v-show="showOne"></image>
					<image src="../../static/r3.png" style="width: 60rpx;margin-top: 190rpx;margin-left: 30rpx;" mode="widthFix" v-show="showTwo"></image>
					<image src="../../static/r4.png" style="width: 200rpx;margin-top: 20rpx;" mode="widthFix" v-show="showThere"></image>
					<image src="../../static/r3.png" style="width: 60rpx;margin-top: 190rpx;margin-left: 0rpx;" mode="widthFix" v-show="showTwo"></image>
					<image src="../../static/r5.png" style="width: 100rpx;margin-top: 230rpx;margin-left: 20rpx;" mode="widthFix"
					 v-show="showFore"></image>
					<image src="../../static/r5.png" style="width: 100rpx;margin-top: 230rpx;" mode="widthFix" v-show="showFore"></image>
					<image src="../../static/r2.png" class="lightImg" mode="widthFix" v-show="showFive"></image>
				</view> -->
				<!-- 祈愿按钮 -->
				<view class="worBtn"  v-show="showWor" @click="wishClick(prayList.id)">去祈愿</view>
			</view>
			<view class="footer">
				<text v-for="(item,index) in itemList" :key="index" :class="{ 'active':current===index }" @click="textClick(index)">{{item.title}}</text>
			</view>
		</view>
		
		<!-- 简介 -->
		<uni-popup ref="popup" type="center">
			<view class="brief">
				<image src="../../static/clos.png" mode="" class="closImg" @click="closClick()"></image>
				<text class="brief_title">{{prayList.title}}</text>
				<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 750rpx;padding-top: 15rpx;">
					<view class="briefImg">
						<image :src="'https://www.123qifu.com/'+prayList.image" style="width:30%" mode="widthFix"></image>
					</view>
					<view class="brief_conten">
						<text style="font-size: 30rpx; color: #444444;">{{prayList.title}}</text>
						<text style="padding: 15rpx 0 0; ">{{prayList.content}}</text>
					</view>
				</scroll-view>	
			</view>
		</uni-popup>
		<!-- 购买记录弹出层 -->
		<uni-popup ref="xiaofei" type="bottom">
			<view class="xiaofei">
				
				<view class="title">
					<image src="../../static/pray/cha.png" mode="" class="cha" @click="close"></image>
					<view class="">我的祈愿记录</view>
				</view>
				
				<view class="" v-for="(item,index) in qiyuanList" :key='index'>
					<view class="fubi">
						<view class="">
							<view style="font-size: 34rpx;padding-bottom: 15rpx;">福币</view>
							<view style="font-size: 30rpx;color:  #555555;">{{item.payment_time | formatDate}}</view>
						</view>
						<view class="koukuan">-{{item.true_amount}}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="kuaiqu" v-show="qiyuanList.length == 0">
					<image src="../../static/PersonalCenter/xiaofei.png" mode="" style="width: 120rpx;height: 120rpx;"></image>
					<view style="color: #7E7B7B; font-size: 32rpx;padding-top: 20rpx;">您暂时还没有祈愿哦~</view>
				</view>
			</view>
		</uni-popup>
		<!-- 捐赠记录弹出层 -->
		<uni-popup ref="juanzeng" type="bottom">
			<view class="xiaofei">
				<view class="title">
					<image src="../../static/pray/cha.png" mode="" class="cha" @click="close"></image>
					<view class="">我的捐款记录</view>
				</view>
				<view class="" v-for="(item,index) in DonationList" :key='index'>
					<view class="fubi">
						<view class="">
							<view style="font-size: 34rpx;padding-bottom: 15rpx;">福币</view>
							<view style="font-size: 30rpx;color:  #555555;">{{item.payment_time | formatDate}}</view>
						</view>
						<view class="koukuan">-{{item.true_amount}}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="ao" v-show="DonationList.length == 0">
					<image src="../../static/PersonalCenter/wallet.png" mode="" style="width: 120rpx;height: 120rpx;"></image>
					<view style="color: #7E7B7B; font-size: 32rpx;padding-top: 20rpx;">您还没有捐过款噢~</view>
				</view>
				
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				wishList: [{
						index: 0,
						imgUrl: require('../../static/g1.png'),
						text: '供烛'
					},
					{
						index: 1,
						imgUrl: require('../../static/g2.png'),
						text: '供香'
					},
					{
						index: 2,
						imgUrl: require('../../static/g3.png'),
						text: '供灯'
					},
					{
						index: 3,
						imgUrl: require('../../static/g4.png'),
						text: '供花'
					},
					{
						index: 4,
						imgUrl: require('../../static/g5.png'),
						text: '供果'
					}
				],
				flag: false,
				show: false,
				itemList: [{
						index: 0,
						title: '主页'
					},
					{
						index: 1,
						title: '简介'
					},
					// {
					// 	index: 2,
					// 	title: '拜佛'
					// },
					{
						index: 3,
						title: '祈愿'
					},
					{
						index: 4,
						title: '捐赠'
					}
				],
				current: 0,
				showOne: false,
				showTwo: false,
				showThere: false,
				showFore: false,
				showFive: false,
				showLight: true,
				showWor: false,
				showTribute: true, //贡品
				prayList: [],
				worShow: false, //捐赠人数
				flags: false,
				donate: false, ///捐赠按钮
				moneyText: '', // 捐赠金额
				showTap: false,
				Wishid: '', // 礼佛列表id
				token: '',
				Records: true,
				donation: false,
				DonationList: [] ,// 捐赠记录列表，
			    qiyuanList: []
				
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		mounted() {
			this.timer = setInterval(() => {
				this.flags = false
			}, 10000)
		},
		onLoad(options) {
			// console.log(options)
			console.log(options.Wishid)
			this.Wishid = options.Wishid
			this.token = uni.getStorageSync('token')
		},
		onShow() {
			this.getPrayList()
			this.getDonationList()
			this.getqiyuanList()
		},
		methods: {
			gobackClick() {
				uni.navigateTo({
					url: '../Buddha/Lifo'
				})
			},
			openxiaofei(){
				this.$refs.xiaofei.open()
			},
			close(){
				this.$refs.xiaofei.close()
				this.$refs.juanzeng.close()
			},
			opendonation(){
				this.$refs.juanzeng.open()
				
			},
			// 获取捐赠记录数据
			async getDonationList() {
				let that = this
				const res = await that.$myRequest({
					url: 'index/getMyBill',
					method: "POST",
					header: {
						// 'Authorization' : that.bearerToken
						'token': that.token
					},
					data: {
						type: 6
					}
				})
				that.DonationList = res.data.data.data
			    console.log(that.DonationList )
			},
			// 获取祈愿记录列表
			async getqiyuanList() {
				let that = this
				const res = await that.$myRequest({
					url: 'index/getMyBill',
					method: "POST",
					header: {
						// 'Authorization' : that.bearerToken
						'token': that.token
					},
					data: {
						type: 2
					}
				})
				that.qiyuanList = res.data.data.data
			    console.log(that.qiyuanList  )
			},
			
			
			
			// 获取礼佛数据
			async getPrayList() {
				let that = this
				const res = await that.$myRequest({
					url: 'user/get_lf_detail',
					method: "GET",
					header: {
						// 'Authorization' : that.bearerToken
						'token': that.token
					},
					data: {
						id: that.Wishid
					}
				})
				
				that.prayList = res.data.data
				console.log(that.prayList)
				// if (res.data.code == 200) {
				// 	that.prayList = res.data.data[0]
				// 	console.log(that.prayList)
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: res.data.msg
				// 	})
				// }
			},
			textClick(index) {
				this.current = index
				if (index == 0) {
					this.showWor = false
					this.showLight = false
					this.worShow = false
					this.donate = false
					this.donation = false
                    this.Records = true
										
				} else if (index == 1) {
					this.$refs.popup.open()
					this.showLight = false
					this.showTribute = false
					this.worShow = false
					this.donate = false
					this.donation = false
					this.Records = true
				// } else if (index == 2) {
				// 	this.worShow = false
				// 	this.donate = false
				// 	this.donation = false
				// 	this.Records = true
				// 	uni.navigateTo({
				// 		url: './Wish?Wishid='+ this.Wishid
				// 	})
				} else if (index == 2) {
					this.worShow = false
					this.showLight = false
					this.showWor = true
					this.showTribute = false
					this.donate = false
					this.donation = false
					this.Records = true
				} else if (index == 3) {
					this.showLight = false
					this.showWor = false
					this.worShow = true
					this.donate = true
					this.donation = true
					this.Records = false
					// uni.navigateTo({
					// 	url: './Worship'
					// })
				}

			},
			//关闭弹窗
			closClick() {
				this.$refs.popup.close()
			},
			//拜佛
			moneyClcik() {
				this.flag = !this.flag
			},
			//取消拜佛
			showClcik() {
				this.show = true
				this.flag = false
			},
			//捐赠
			async boxClick(id) {
				if(!this.moneyText){
					uni.showToast({
						title:'请输入捐赠金额',
						icon:"none"
					})
				} else {
					let that = this
					const res = await that.$myRequest({
						url: 'user/addBuddhistDonation',
						method: "GET",
						header: {
							// 'Authorization' : that.bearerToken
							'token': that.token
						},
						data: {
							id: id,
							money: that.moneyText
						}
					})
					console.log(res)
					if (res.data.code == 1){
						let that = this
					    that.ordercode = res.data.msg
						const datas = await this.$myRequest({
							url: 'pay/wx_pay',
							method:"POST",
							header: {
								// 'Authorization' : that.bearerToken
								'token':  that.token
							},
							data: {
								order_sn: that.ordercode
							}
						})
						console.log(datas)
						if(datas.data.code == 1) {
							// alert(11111)
							WeixinJSBridge.invoke(
							   'getBrandWCPayRequest', {
							      "appId":datas.data.data.appId,//公众号名称，由商户传入     
							      "timeStamp":datas.data.data.timeStamp,//时间戳，自1970年以来的秒数     
							      "nonceStr":datas.data.data.nonceStr,//随机串 
							      "package":datas.data.data.package,
							      "signType":datas.data.data.signType,//微信签名方式：
							      "paySign":datas.data.data.paySign//微信签名
							   },
							function(res){
								// alert(JSON.stringify(res))
								// alert(1111)
							    if(res.err_msg == "get_brand_wcpay_request:ok" ){
									// 使用以上方式判断前端返回,微信团队郑重提示：
							        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
									// alert(out_trade_no)
									uni.request({
										url: "https://www.123qifu.com/api/pay/weixin_getList",
										method:"POST",
										header: {
											// "Authorization" : that.bearerToken
											'token':  that.token
										},
										data:{
											order_sn:that.ordercode
										},
										success: (res) => {
											if(res.data.code == 1) {
												uni.showToast({
													title:'捐赠成功',
													icon:"none"
												})
												
											}
										}
									})	
							    }
							}
							);
							
					    }
					}
					
				}
				
			},
			// 贡品
			wishClcik(index) {
				if (index == 3) {
					this.showOne = true
				} else if (index == 0) {
					this.showTwo = true
				} else if (index == 1) {
					this.showThere = true
				} else if (index == 4) {
					this.showFore = true
				} else if (index == 2) {
					this.showFive = true
				}
			},
			//去祈愿
			wishClick(id) {
				console.log(id)
				uni.navigateTo({
					url: './Donate?id='+ id
				})
			},
			// 捐赠
			
		}
	}
</script>

<style lang="scss">
	page {
		position: fixed;
	}
	
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
		background: url(../../static/baiyun.jpg) no-repeat;
		background-size: 100% 100%;
	}

	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		background-color: #C52B2E;
		font-size: 30rpx;
		color: #FFFFFF;
		letter-spacing: 2rpx;

		.active {
			color: #FFD500;
		}
	}

	.wish {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 200rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #C52B2E;
		position: fixed;
		bottom: 100rpx;
		border-bottom: 1rpx dotted #ccc;

		.wish_one {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.popup {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 546rpx;
		padding: 36rpx 0 0;
		margin: auto auto;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #333;

		.popText {
			display: flex;

		}

		.popBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			//background-color: pink;
			border-top: 1rpx solid #ccc;
			border-radius: 0 0 10rpx 10rpx;

			.cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #888888;
				width: 50%;
				height: 100%;
				border-right: 1rpx solid #ccc;
				letter-spacing: 2rpx;
			}
		}
	}

	.abolish {
		position: absolute;
		bottom: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		text-align: center;
		padding: 10rpx 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #333333;

	}

	.article {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		position: fixed;
		bottom: 330rpx;

		.flower {
			position: absolute;
			top: 130rpx;
			left: 70rpx;
		}

		.apple {
			position: absolute;
			top: 190rpx;
			right: 10rpx;
		}

	}

	.sidelight {
		position: fixed;
		bottom: 430rpx;
		right: 90rpx;
		width: 130rpx;
	}

	.tribute {
		position: fixed;
		left: 55%;
		transform: translate(-50%);
		bottom: 310rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 0rpx 10rpx;
		box-sizing: border-box;
		//background-color: #fff;
	}

	.brief {
		display: flex;
		flex-direction: column;
		width: 680rpx;
		margin: 0 auto;
		padding: 15rpx 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;

		.closImg {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 30rpx;
			height: 30rpx;
			margin: 0 0 30rpx;
		}

		.brief_title {
			color: #333;
			font-size: 32rpx;
			margin: 10rpx auto 0;
			font-weight: 600;
		}

		.briefImg {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;
			margin: 5rpx auto;
			border-radius: 5rpx;
			padding: 10rpx;
			background-color: #CACACA;
		}

		.brief_conten {
			display: flex;
			flex-direction: column;
			width: 90%;
			margin: 0 auto;
			padding: 10rpx 0;
			color: #555;
			font-size: 28rpx;

		}
	}

	.lightImg {
		position: absolute;
		right: 160rpx;
		//bottom: 300rpx;
		width: 100rpx;
	}

	.worship_text {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		font-size: 31rpx;
		color: #9F383C;
		text-align: right;
		position: absolute;
		right: 20rpx;
		top: 180rpx;

		.amount {
			background-color: #C52B2E;
			color: #fff;
			padding: 0 10rpx;
			border-radius: 8rpx;
		}
	}

	.money {
		display: flex;
		align-items: center;
		justify-content: center;
		// margin: 20rpx 0;
		width: 100%;
		// background-color: pink;
	    padding-bottom: 200rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 800;
		position: absolute;
		top:69%;

		.moneyInp {
			width: 127rpx;
			height: 69rpx;
			border: 3rpx solid #CECECE;
			background-color: #fff;
			border-radius: 10rpx;
			//padding-left: 10rpx;
			box-sizing: border-box;
			text-align: center;
			font-weight: 400;
		}
	}

	.worBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		margin-top: 40rpx;
		width: 211rpx;
		height: 69rpx;
		background-color: #C52B2E;
		border-radius: 35rpx;
	}

	.boxImg {
		position: absolute;
		bottom: 130rpx;
		width: 315rpx;
	}

	.boxText {
		position: absolute;
		bottom: 130rpx;
		width: 288rpx;
		height: 89rpx;
		background-color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
		line-height: 89rpx;
		letter-spacing: 2rpx;
	}
	.xiaofei {
		width: 100%;
		height: 900rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			
			.cha {
				width: 34rpx;
				height: 34rpx;
				position: relative;
				right: 220rpx;
				
			
			}
		}
		.consumption{ 
			padding: 30rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.img {
				width: 100rpx;
				
			}
		}
		.line {
			width: 95%;
			margin-left: 20rpx;
			border-bottom: 1rpx dashed #707070;
		}
		.kuaiqu {
			display: flex;
			flex-direction: column;
			align-items: center;
		    padding-top: 200rpx;
		}
		
	}
	.fubi {
		padding: 30rpx 40rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.koukuan {
			font-size: 40rpx;
			color: #C52B2E;
		}
		.line {
		    width: 95%;
			margin-left: 20rpx;
			border-bottom: 1rpx dashed #707070;
		}
	}
	.ao {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200rpx;
	}
</style>
